<template>
  <div>
    <!-- 视频插件 -->
    <!-- 引入西瓜控件 -->
    <div id="mse"></div>
  </div>
</template>

<script setup lang="ts">
/* 引入西瓜视频 (好用简单) */
import Player from 'xgplayer'
import 'xgplayer/dist/index.min.css'
import { onMounted, ref, defineProps } from 'vue';

const props = defineProps<{
  videoes: any
}>()
console.log(props.videoes.url, 'props')

const videos = ref({})
onMounted(() => {
  videos.value = new Player({
    id: "mse", //元素id
    lang: "zh", //设置中文
    volume: 0, // 默认静音
    width: 200,
    height: 100,
    autoplay: false, //自动播放
    screenShot: true, // 开启截图功能
    //视频地址
    url: props.videoes.url,
    //封面图
    poster: props.videoes.path,
    fluid: true, // 填满屏幕 （流式布局）
    playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组
  });
})




</script>

<style lang="scss" scoped>
#mse {
  width: 50%;
}
</style>